import React, {Component} from 'react';

class Home extends Component {
    // 1- 经常将属性作为自身的状态
    // 2- 在使用状态时，在render中进行解构赋值。
    state = {
        num:this.props.num,
        a:2,
        b:3
    }
    render() {
        const {num,a,b} = this.state;
        // 生命周期
        return (
            <div>
                {/*<h3>HOME{this.props.num}</h3>*/}
                {/*<p>{num}</p>*/}
                <button onClick={()=>{
                    // 注意：如果修改以后的状态值是在原来值的基础上进行操作的，不建议：
                    // this.setState({
                    //     num:this.state.num+1
                    // })
                    //
                    // this.setState({
                    //     num:this.state.num+1
                    // })

                    // 建议
                    // this.setState((prevState)=>{
                    //     return {
                    //         num:prevState.num+1
                    //     }
                    // })
                    // this.setState((prevState)=>{
                    //     return {
                    //         num:prevState.num+1
                    //     }
                    // })
                }}>{num}</button>
            </div>
        );
    }
}

export default Home;